<template>
  <div class="page-container fixed-bottom">
    <Steps :step="step" />
    <Step1 v-show="step === 1" ref="step1" :form-detail="detail" />
    <Step2 v-show="step === 2" ref="step2" :form-detail="detail" />
    <Step3 v-show="step === 3" :status="-1" @cancel="cancelHandle" />
    <div class="bottom-handle-box">
      <el-button @click="goApprove">查看审核进度</el-button>
      <el-button v-if="step === 1" type="primary" @click="nextHandle(false)">下一步</el-button>
      <el-button v-if="step === 2" type="primary" @click="beforeHandle(false)">上一步</el-button>
      <el-button v-if="step === 2" type="primary" @click="saveHandle">发布</el-button>
    </div>
  </div>
</template>

<script>
import { rollProductBack } from '@/api/common'
import { createProduct, getProductDetail } from '@/api/product'
import { mapGetters } from 'vuex'
import Steps from './Steps.vue'
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'
import Step3 from './Step3.vue'
export default {
  name: 'Product',
  components: {
    Steps,
    Step1,
    Step2,
    Step3
  },
  data() {
    return {
      id: '',
      step: 1,
      detail: {}
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },
  created() {
    const { id } = this.$route.query
    if (id) {
      this.id = id
      this.getDetail()
    }
  },

  methods: {

    // 获取详情
    getDetail() {
      const data = {
        id: this.id
      }
      getProductDetail(data).then(res => {
        this.detail = res
      }).catch(() => {})
    },

    // 查看审核进度
    goApprove() {
      this.$router.push({
        path: '/shop/creatProduct/approve'
      })
    },

    // 上一步
    beforeHandle() {
      this.step = this.step - 1
    },

    // 下一步
    async nextHandle() {
      await this.$refs.step1.$refs.form.validate()
      this.step = this.step + 1
    },

    // 撤销发布
    cancelHandle() {
      const data = {
        productId: this.id
      }
      this.$confirm('确定要撤销发布吗?', '提示', {
        type: 'warning'
      }).then(() => {
        rollProductBack(data).then(() => {
          this.$message.success('撤销发布成功')
          this.step = 1
        }).catch(() => {})
      }).catch(() => {})
    },

    // 保存
    async saveHandle() {
      await this.$refs.step2.$refs.form.validate()
      const data = {
        ...this.$refs.step1.form,
        ...this.$refs.step2.form,
        draft: false,
        approveType: 2, // 产品审核
        type: 1,
        productType: this.currentSite.productType,
        siteId: this.currentSite.id,
        shopId: this.currentSite.shopId
      }
      console.log(data)
      createProduct(data).then(res => {
        this.id = res
        this.$message.success('发布成功')
        this.step = this.step + 1
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
